<template>
  <div>
    <CloudButton @click="changeHorizontal">Horizontal</CloudButton>
    <CloudButton @click="changeVertical">Vertical</CloudButton>
    <CloudTabs v-model="currentTab" :tabList="tabList" :tabPosition="tabPosition" @change="change" @tabClick="tabClick" @prevClick="callback" @nextClick="callback">
    </CloudTabs>
  </div>
</template>

<script>
const tabList = []
for (let i = 0; i < 30; i++) {
  tabList.push({
    key: (i+1).toString(),
    tab: `tab${i + 1}`,
    content: `Content of Tab ${i + 1}`
  })
}


export default {
  title: '3.滑动',
  data() {
    return {
      currentTab: '1',
      tabList,
      tabPosition: 'top'
    }
  },
  methods: {
    change (val) {
      console.log(val);
    },
    tabClick (val) {
      console.log(val);
    },
    callback(val) {
      console.log(val);
    },
    changeHorizontal() {
      this.tabPosition = 'top'
    },
    changeVertical() {
      this.tabPosition = 'left'
    }
  }
}
</script>

<style lang="scss">
</style>